/* 背景图 移动的方式 */
body{
	/* 背景属性（复合）：路径地址（相对路径+图片名称） */
	background: url(../img/bg.jpg) no-repeat;
	/* 背景图尺寸属性 绝对值 px;百分比形式  宽度，高度*/
	background-size: 100% 816px;
}

/* 2.文字：抓文字 */
h1{
/* 文字放大 */
	font-size: 50px;
	/* 文本字体*/
	font-family: "华文彩云";
	/* 文本加粗  font-weight：900（最大值）范围：100~900 */
	/* 文本阴影  X Y模糊尺寸 颜色*/
	text-shadow: 5px 5px 5px #aaaa7f;
	/* 字体颜色 */
	color: #aa5500;
	/* 透明度  0~1之间*/
	opacity: .6;
}

/* 3.熊猫  空间+背景图*/
#bear{
	width: 300px;
	height: 300px;
	borde r: 1px solid red;
	/* 背景图 */
	background: url(../img/bear_1.png) no-repeat;
	/* 背景图占满整个熊的空间 */
	background-size: 100% 100%;
	/* 定位 */
	position: relative;
	top:5px;
	left: -7px;
	/* 启动动画 */
	animation: bear 2s linear infinite ;
}

/* 创建手翻书 关键帧  1背景图改变 2坐标位置改变 */
@keyframes bear{
	0%{
		/* 第一组动画 必须是原始位置，不变 */
		background: url(../img/bear_1.png) no-repeat;
		/* 先有动画才能设置背景尺寸 */
		background-size: 100% 100%;
		top:5px;
		left: -7px;
		transform: rotate(360deg) scale(.4);
	}
	10%{
		background: url(../img/bear_1.png) no-repeat;
		background-size: 100% 100%;
		top:158px;
		left: 681px;
		transform: rotate(360deg) scale(.5);
	}
	20%{
		background: url(../img/bear_2.png) no-repeat;
		background-size: 100% 100%;
		top:369px;
		left: 352px;
		transform: rotate(0deg) scale(.6);
	}
	30%{
		background: url(../img/bear_3.png) no-repeat;
		background-size: 100% 100%;
		top:316px;
		left: -7px;
		transform: rotate(74deg) scale(.7);
	}
	40%{
		background: url(../img/bear_4.png) no-repeat;
		background-size: 100% 100%;
		top:175px;
		left: 233px;
		transform: rotate(328deg) scale(.8);
	}
	50%{
		background: url(../img/bear_5.png) no-repeat;
		background-size: 100% 100%;
		top:5px;
		left: -7px;
		transform: rotate(670deg) scale(.9);
	}
	60%{
		background: url(../img/bear_6.png) no-repeat;
		background-size: 100% 100%;
		top:163px;
		left: 700px;
		transform: rotate(78deg) scale(1);
	}
	70%{
		background: url(../img/bear_7.png) no-repeat;
		background-size: 100% 100%;
		top:228px;
		left: 186px;
		transform: rotate(321deg) scale(1.2);
	}
	80%{
		background: url(../img/bear_8.png) no-repeat;
		background-size: 100% 100%;
		top:352px;
		left: 187px;
		transform: rotate(135deg) scale(1.3);
	}
	90%{
		background: url(../img/bear_9.png) no-repeat;
		background-size: 100% 100%;
		top:237px;
		left: 107px;
		transform: rotate(45deg) scale(1.4);
	}
	100%{
		background: url(../img/bear_10.png) no-repeat;
		background-size: 100% 100%;
		top:124px;
		left: 57px;
		transform: rotate(180deg) scale(1.1);
	}
	
}